@use './scss/hljs';
@use './scss/variables';
@use './scss/utils';
@use './scss/theme.scss';

:root {
  --docsearch-primary-color: #ed2945;
  --docsearch-highlight-color: #ed2945;
  --docsearch-logo-color: #ed2945;
  --docsearch-modal-background: #fafafa;
  --docsearch-searchbox-focus-background: transparent;
  --docsearch-searchbox-shadow: none;
  --primary-color: #ea2845;
  --primary-accent-color: #ea2868;
}

html[mode='dark'] {
  @extend .dark-mode;

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: #494951 !important;
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #6d6d6d;
  }

  ::-webkit-scrollbar-track {
    background: var(--background-3dp);
  }

  ::-webkit-scrollbar-corner {
    background: var(--background-3dp);
  }

  .app-menu {
    &::-webkit-scrollbar {
      width: 6px;
    }
  }

  .app-menu:not(:hover) {
    &::-webkit-scrollbar-thumb {
      background: var(--menu-background) !important;
    }

    &::-webkit-scrollbar-track {
      background: var(--menu-background);
    }

    &::-webkit-scrollbar-corner {
      background: var(--menu-background);
    }
  }
}

html:not([mode='dark']):not([mode='light']),
html[mode='light'] {
  @extend .light-mode;
}

body {
  font-size: 16px;
  font-weight: 400;
  // letter-spacing: 0.2px;
  font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;
  font-display: swap;
  background-color: var(--background);
  color: var(--color);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
  transition: background 200ms cubic-bezier(0.7, 0, 0.3, 1);
}

a {
  text-decoration: none;
}

strong {
  color: var(--color-1dp);
  font-weight: 600;
}

hr {
  width: 40px;
  height: 4px;
  background: variables.$red-gradient;
  border: 0;
  margin: 50px 0;
}

h4 {
  font-size: 20px;
}

blockquote {
  line-height: 1.6;
  position: relative;
  margin: 35px 0;
  background: var(--error-background);
  padding: 20px;
  border-radius: 3px;

  &::before {
    height: 100%;
    width: 4px;
    content: '';
    background: variables.$red-gradient;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  strong {
    color: variables.$red-color;
    @include utils.text-gradient();

    &:first-of-type {
      display: block;
      text-transform: uppercase;
      font-size: 15px;
      font-weight: bold;
    }
  }

  &.warning {
    background: var(--warning-background);
    &::before {
      background: var(--warning);
    }
    strong,
    a {
      color: var(--warning-color);
    }
  }

  &.info {
    background: var(--info-background);
    &::before {
      background: var(--info);
    }
    strong,
    a {
      color: var(--info-color);
    }
  }
}

blockquote {
  code[class*=language-], pre[class*=language-] {
    margin: 20px 0;
  }

  p:last-of-type {
    margin-bottom: 0;
  }
}

figure {
  margin: 60px 30px;
  text-align: center;
  @include utils.media(medium) {
    margin: 60px 0;
  }

  img, iframe {
    max-width: 100%;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.08);
  }

  img {
    height: auto;
  }
}

.illustrative-image {
  filter: var(--images-filter);
  box-shadow: var(--images-box-shadow);
}

figcaption {
  color: rgba(variables.$silver-color, 0.9);
  font-size: 16px;
  margin: 20px 0;

  p {
    font-size: 16px;
  }
}

table {
  width: 100%;
  margin: 40px 0;
}

tr {
  @include utils.media(medium) {
    margin-bottom: 20px;
    display: block;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

th {
  padding: 20px;
  background: var(--background-1dp);
}

tr:nth-of-type(even) td {
  background: var(--background-1dp);
}

tr:nth-of-type(odd) td:first-of-type {
  border-right: 1px solid var(--background-2dp);

  @include utils.media(medium) {
    border-right: 0;
    border-bottom: 1px solid var(--background-2dp);
  }
}

tr:nth-of-type(even) td:first-of-type {
  border-right: 1px solid var(--background);
  @include utils.media(medium) {
    border-right: 0;
    border-bottom: 1px solid var(--background);
  }
}

tr td {
  padding: 20px 30px;
  vertical-align: top;

  @include utils.media(medium) {
    display: block;
    padding: 20px;
  }
}

tr td span.table-code-asterisk {
  color: var(--inline-code-color);
  font-weight: 700;
}

.file-tree {
  background: var(--background-1dp);
  border: 4px solid color-mix(in srgb,var(--background-3dp),#0000 50%);
  margin: 40px 0;
  padding: 16px 32px;

  .item {
    display: block;
    line-height: 32px;
    font-size: 15px;
    color: var(--color-1dp);
  }

  .children {
    padding-left: 30px;
    position: relative;
    overflow: hidden;

    .item {
      position: relative;
    }

    .item:before {
      content: '';
      left: -18px;
      bottom: 16px;
      width: 16px;
      height: 9999px;
      position: absolute;
      border-width: 0 0 1px 1px;
      border-style: solid;
      border-color: #dbdbdb;
      border-radius: 0 0 0 3px;
    }
  }
}

.external {
  background: var(--background-2dp);

  &::before {
    background: #e8e8e8;
  }
}

/* start */
// rule for code snippet
.hide {
  display: none !important;
}
/* end */

.banner {
  padding: 2.5rem;
  margin: 2.5rem 0px;
  color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 5px;
  text-align: left;

  h2 {
    color: #fff !important;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin: 0;

    span {
      color: #e31d61;
    }
  }

  ul {
    padding: 0;
    margin: 0;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-count: 2;
    -moz-column-fill: balance;
    column-fill: balance;
    max-width: 450px;
    margin: 1.2rem 0;

    @media (max-width: 480px) {
      -webkit-columns: 1;
      -moz-columns: 1;
      column-count: 1;
    }
  }

  li {
    line-height: 2.5rem;
    display: block;
    position: relative;
  }

  ul span {
    background: rgba(7, 239, 143, 0.21);
    color: #07ef8f;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: inline-block;
    position: relative;
    font-size: 12px;
    vertical-align: middle;
    margin-right: 15px;
  }

  li span svg {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  .btn-more {
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
    padding: 4px 13px;
    background: #e31d61;
    transition: none;
    position: relative;

    &:hover {
      color: #e31d61;
      background: transparent !important;
    }

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 2px;
      padding: 2px;
      background: var(--primary-gradient);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      z-index: 2;
    }
  }
}

.DocSearch-Modal {
  margin-top: 120px;
  border-radius: 3px;
}

.DocSearch-Container {
  z-index: 20000;
  background: rgba(0, 0, 0, 0.6);
}

// Scrollbar sidebar

app-menu::-webkit-scrollbar {
  width: 6px;
}

app-menu:hover::-webkit-scrollbar-thumb {
  background: #dedede;
  border-radius: 10px;
}

app-menu::-webkit-scrollbar-thumb:hover {
  -webkit-transition: #dedede 1s linear;
}
